<template>
	<view class="withdraw">
		<view class="withdraw-head" :style="payType == 1 ? 'padding: 10rpx 10rpx;' : 'padding: 40rpx 40rpx;'">
			<view class="withdraw-head-to">收款方式</view>
			<view class="withdraw-head-way" @click="showAccount">
				<view class="withdraw-head-way-1" >
					<image class="way-icon" src="../../static/images/money.png"></image>
					<text class="way-text" v-if="collectionId == null">请选择收款方式</text>
					<text class="way-text" v-if="collectionId != null">{{qudaoName}}</text>
					<text class="cuIcon-right"> </text>
				</view>
				<view class="withdraw-head-way-2">仅支持整数，48小时内到账</view>
			</view>
		</view>
		<view class="withdraw-body">
			<text>提现金额</text>
			<view class="input-money">
				<text class="rmb">￥</text>
				<!--
				<input v-model.number="extract"  type="text" @focus.prevent="stopKeyborad" class="t-input" />
				-->
				<input type="number" @input="extractInput" :value="extract" class="t-input" />
			</view>
			<view class="info-money">
				<view v-if="is_out">
					<text class="info-money-num" style="color: #ff1e0f;">输入金额超过可提现余额，账户余额{{ pool }}元</text>
				</view>
				<view v-else-if="is_lowest">
					<text class="info-money-num" style="color: #ff1e0f;">最低{{ lowest }}元起提现，账户余额{{ pool }}元</text>
				</view>
				<view v-else>
					<text class="info-money-num">当前可提现余额{{ pool }}元，</text>
					<text class="info-money-all" @click="getAll">全部提现</text>
				</view>
			</view>
			<view :class="'tx' + (is_post ? '-active' : '')"><button @click="handleShowModel">提现</button></view>
		</view>

		<view class="cu-modal" :class="showModal ? 'show' : ''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end"><view class="content">提现确认</view></view>
				<view class="padding-xl" style="text-align: left;">
					<view>
						<text>提现金额：</text>
						<text class="text-red fee">
							{{ money }}
							<em>元</em>
						</text>
					</view>
					<view class="margin-top-sm">
						<text>实际到账：</text>
						<text class="text-red fee">
							{{ real_money }}
							<em>元</em>
						</text>
					</view>
					<view class="margin-top-sm">
						<text>手续费：</text>
						<text class="text-red fee">
							{{ service_fee }}
							<em>元</em>
						</text>
					</view>
					<view class="margin-top-sm">
						<text>手续费率：</text>
						<text class="text-red">{{ fee }}%</text>
					</view>
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn margin-left" @tap="showModal = false">我再想想</button>
						<button class="margin-left " @tap="getMoney" size="mini" type="primary">确认提现</button>
					</view>
				</view>
			</view>
		</view>
		
		
		
		<view class="cu-modal " :class="showModalAccount ? 'show' : ''">
			<view class="cu-dialog my-modal">
				<view class="cu-bar bg-white justify-end">
					<view class="content">收款方式</view>
					<view class="action" @click="clickShowModal"><text class="cuIcon-close text-red"></text></view>
				</view>
				
				<view v-if="list.length == 0" class="my-nodata">
					<image src="../../static/images/no-data.png"></image>
					<view class="no-data-text">
						<text>无数据</text>
						<view>可在我的钱包.提现-收款账户管理添加</view>
					</view>
				</view>
				<scroll-view style="height: 90%;" scroll-y="true" scroll-with-animation="true">
					
					<view class="cu-card dynamic "  style="margin-bottom: 10px;">
						<view class="cu-item shadow my-box-shadow" v-for="(item,index) in list">
							<view class="cu-list menu-avatar my-box-shadow " :data-index="index" :data-id="item.id" @click="choiceAccount">
								<view class="cu-item my-card">
									<view class='cu-tag radius bg-blue my-tag' v-if="item.isDefault == 1">默认</view>
									<view class="collection" >
										<image src="../static/yinhangka.png" class="collection-image" mode="aspectFit" v-if="item.payType ==1"></image>
										<image src="../static/zhifubao.png" mode="aspectFit" v-if="item.payType ==2"></image>
									</view>
									<view class="content flex-sub" v-if="item.payType == 1">
										<view>银行卡：{{item.backName}}</view>
										<view class="text-gray text-sm flex justify-between">
											真实姓名：{{item.fullName}}
										</view>
										<view class="text-gray text-sm flex justify-between">
											银行卡号：{{item.account}}
										</view>
										<view class="text-gray text-sm flex justify-between">
											身份证号：{{item.idCard}}
										</view>
										<view class="text-gray text-sm flex justify-between">
											预留电话：{{item.resMobile}}
										</view>
									</view>
									<view class="content flex-sub" v-if="item.payType == 2">
										<view class="text-gray text-sm flex justify-between">
											真实姓名：{{item.fullName}}
										</view>
										<view class="text-gray text-sm flex justify-between">
											支付宝账号：{{item.account}}
										</view>
										<view class="text-gray text-sm flex justify-between">
											身份证号：{{item.idCard}}
										</view>
										<view class="text-gray text-sm flex justify-between">
											预留电话：{{item.resMobile}}
										</view>
									</view>
								</view>
							</view>
							
						</view>
						
					</view>
				</scroll-view>
			</view>
		</view>
		
	</view>
</template>

<script>
	
const http = require('../../utils/http.js');

export default {
	data() {
		return {
			pool: 0,
			extract: '',
			service_fee: 0.0,
			showModal: false,
			is_out: false,
			is_lowest: false,
			is_post: false,
			lowest: 0,
			fee: 0,
			money: '',
			real_money: '',
			keyboradShow: false,
			isIphoneX: false,
			isRefuse: false,
			taxrate:0.0,
			w_fee:0.0,
			platformRate:0.0,
			collectionId:null,
			qudaoName:'',
			payType:0,
			list:[],
			showModalAccount:false
		};
	},
	watch: {
		extract(oldVal, newVal) {}
	},
	onLoad() {
		this.loadBaseInfo();
		this.loadData();
		this.defaultData();
	},
	methods: {
		
		loadDataCollection:function(){
			let that = this;
			uni.showLoading({
			    title: '加载中'
			});
			
			var params = {
			    url: '/u/collection/selectList',
			    method: 'POST',
				baseUrl:true,
			    data: {},
			    callBack: function (res) {
			        uni.hideLoading();
			        if (res.code == 200) {
			            that.list = res.data;
			        } else {
			            uni.showToast({
			                title: res.msg,
			                duration: 2000,
			                icon: 'none'
			            });
			        }
			    }
			};
			http.request(params);
		},
		loadBaseInfo:function(){
			let that = this;
			uni.showLoading({
				title:'加载中'
			})
			var params = {
			    url: '/baseInfo/getTaxrate',
			    method: 'GET',
			    data: {
			    },
			    callBack: function (res) {
					if(res.code == 200){
						that.fee = res.data.w_fee;
						that.lowest = res.data.lowestMoney;
						that.taxrate = res.data.taxrate;
						that.platformRate = res.data.platformRate;
					}else{
						
					}
					uni.hideLoading()
			    }
			};
			http.request(params);
		},
		defaultData:function(){
			let that = this;
			var params = {
				baseUrl:true,
			    url: '/u/collection/defaultData',
			    method: 'GET',
			    data: {
			    },
			    callBack: function (res) {
					if(res.code == 200){
						console.log(res)
						if(res.data != null){
							that.collectionId = res.data.id;
							that.payType = res.data.payType;
							if(res.data.payType == 1){
								that.qudaoName = res.data.backName +"("+res.data.account+")"
							}else if(res.data.payType == 2){
								that.qudaoName = "支付宝 ("+res.data.account+")"
							}
						}
					}
			    }
			};
			http.request(params);
		},
		
		async loadData() {
			
			let that = this;
			uni.showLoading({
				title:'加载中'
			})
			var params = {
				baseUrl:true,
			    url: '/p/user/userInfoBal',
			    method: 'GET',
			    data: {
			    },
			    callBack: function (res) {
					if(res.code == 200){
						that.pool = res.data.balance;
					}
					uni.hideLoading()
			    }
			};
			http.request(params);
		},
		clickShowModal:function(){
			this.showModalAccount = false;
		},
		showAccount:function(){
			this.showModalAccount = true;
			this.loadDataCollection();
		},
		choiceAccount:function(e){
			
			let id =  e.currentTarget.dataset.id;
			let that = this;
			this.collectionId = id;
			
			let index =  e.currentTarget.dataset.index;
			
			let data = this.list[index];
			
			this.payType = data.payType;
			if(data.payType == 1){
				that.qudaoName = data.backName +"("+data.account+")";
			}else if(data.payType == 2){
				that.qudaoName = "支付宝 ("+data.account+")";
			}
			
			this.showModalAccount = false;
			
		},
		extractInput:function(event){
			this.extract = event.target.value;
			if (this.extract && this.extract > 0) {
				let val = parseInt(this.extract);
				if (val == 0) val = '';
				this.extract = val;
				this.checkMoney();
			}else{
				this.checkMoney();
			}
		},
		
		getAll() {
			this.extract = parseInt(this.pool);
			this.checkMoney();
		},
		checkMoney() {
			if (!this.extract || this.extract < this.lowest) {
				this.is_lowest = true;
				this.is_post = false;
			} else if (this.extract > this.pool) {
				this.is_out = true;
				this.is_lowest = false;
				this.is_post = false;
			} else {
				this.is_out = false;
				this.is_lowest = false;
				this.is_post = true;
			}
			if (parseFloat(this.extract).toString() == 'NaN') {
				this.is_post = false;
				// uni.showToast({
				// 	title:'输入金额不合法',
				// 	icon:'none'
				// })
			}
		},
		handleShowModel() {
			if (this.isRefuse) return;
			this.checkMoney();
			if (!this.is_post) return;
			
			this.money = this.extract;
			this.service_fee = Number((this.extract * (this.fee / 100)).toString().match(/^\d+(?:\.\d{0,2})?/));
			this.real_money = Number((this.extract - this.service_fee).toString().match(/^\d+(?:\.\d{0,2})?/));
			this.showModal = true;
		},
		getMoney() {
			this.showModal = false;
			if(this.collectionId == null || this.collectionId == ''){
				uni.showToast({
					title:'请选择到账渠道',
					icon:'none'
				})
				return;
			}
			
			if (this.isRefuse) return;
			this.isRefuse = true;
			
			let that = this;
			
			let data = {
				collectionId:that.collectionId,
				money : that.money,
				actualMoney : that.real_money,
				platformRate: that.platformRate,
				taxrate:that.taxrate
			};
			uni.showLoading({
				title:'提交中'
			})
			
			var params = {
				baseUrl:true,
			    url: '/u/withdrawal/addWithdrawal',
			    method: 'POST',
			    data: JSON.stringify(data),
			    callBack: function (res) {
					if(res.code == 200){
						setTimeout(() => {
							uni.showToast({
								title:'提现申请已提交，等待管理员处理',
								icon:'none'
							})
							setTimeout(() => {
								let pages = getCurrentPages(); // 获取所有页面栈实例列表
								let beforePage = pages[pages.length - 2]; // 上一页
								beforePage.$vm.userInfoBal();
								uni.navigateBack();
								
							}, 1000);
						}, 400);
						
					}else{
						that.isRefuse = false;
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
					uni.hideLoading()
			    }
			};
			http.request(params);
		}
	},
	onPullDownRefresh() {
		this.extract = '';
		this.loadData();
		this.is_out = false;
		this.is_lowest = false;
		this.is_post = false;
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 500);
	},

};
</script>

<style lang="scss" scoped>
@import '../../colorui/main.css';
@import '../../colorui/icon.css';
	
page {
	background-color: #ededed;
}
.withdraw {
	padding: 20px;
	&-head {
		background-color: #f7f7f7;
		display: flex;
		align-content: center;
		padding: 10rpx 10rpx;
		font-size: 14px;
		&-to {
		}
		&-way {
			display: flex;
			flex-direction: column;
			align-content: center;
			margin-left: 20px;
			&-1 {
				color: #576b95;
				margin-bottom: 10px;
				.way-icon {
					width: 16px;
					height: 16px;
					margin-right: 5px;
					top: 2px;
				}
			}
			&-2 {
				color: #acacac;
				font-size: 12px;
			}
		}
	}
	&-body {
		background-color: #fff;
		padding: 20px 30px;
		font-size: 14px;
		.input-money {
			display: flex;
			align-content: center;
			font-weight: 600;
			border-bottom: 0.5px solid #eaeef1;
			.rmb {
				font-size: 2em;
				top: 10px;
				position: relative;
			}
			.t-input {
				height: 1.9em;
				font-size: 2.5em;
				border: none;
				position: relative;
				left: 3.5%;
				outline: none;
			}
		}
		.info-money {
			margin-top: 10px;
			font-size: 12px;
			margin-bottom: 20px;
			&-num {
				color: #b2b2b2;
			}
			&-all {
				color: #576b95;
			}
		}
		.tx {
			button {
				color: #b2b2b2;
			}
		}
		.tx-active {
			button {
				color: #fff;
				background: #07c160;
			}
		}
	}
	.keyboard {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background: #ebebeb;
		display: flex;
		justify-content: center;
		z-index: 2;
		flex-wrap: wrap;
		transition: all 0.2s ease-in 0.2s;
	}
	.active {
		bottom: -400rpx;
	}
	.keyboard-item {
		box-sizing: border-box;
		width: 250rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background: #fff;
		font-size: 40rpx;
		color: #333;
		height: 99rpx;
		border: 1rpx solid #ebebeb;
		border-top: none;
		border-left: none;
	}
	.hide {
		opacity: 0;
	}
	.delte {
		background: none;
		box-shadow: none;
	}
	.delte image {
		width: 60rpx;
		height: 60rpx;
	}
	.isIphone {
		padding-bottom: 68rpx !important;
	}
	.fee {
		em {
			font-size: 0.5rem;
			font-style: normal;
		}
	}
}

.text-red{
	color: red;
}

.my-modal{
	width: 100%  !important;
	height: 70%  !important;
	vertical-align: bottom !important;
}
.my-card{
	height: 150px !important;
}
.collection{
	width: 48px;
	height: 48px;
	position: absolute;
	left: -120rpx;
	width: calc(100% - 96rpx - 60rpx - 120rpx - 20rpx);
	line-height: 1.6em;
}

.collection image{
	margin-top: -120px;
	width: 48px;
	height: 48px;
}

.collection-image{
	margin-top: -130px !important;
}

.my-box-shadow{
	box-shadow: 0 6rpx 20rpx #e7e7e7;
}

.my-tag{
	margin-top: -100px;
	margin-right: 10px;
	background: #0081FF;
	color: white;
}

.my-nodata image{
	margin-top: 40rpx;
	width: 240rpx;
	height: 180rpx;
}

.my-nodata text{
	color: grey;
}


</style>
